<template>
  <basic-container>
    <!-- START goBack -->
    <div class="el-page-header haruyuki-mb-20">
      <div
        class="el-page-header__left haruyuki-flex-center haruyuki-size-18"
        @click="goBack"
      >
        <i class="el-icon-arrow-left"></i>
        <div class="haruyuki-size-16">返回</div>
      </div>
      <div class="el-page-header__content">商户修改</div>
    </div>
    <!-- END goBack -->
    <!-- 审核被驳回 修改表单信息 -->
    <section class="haruyuki-bg-color-white">
      <el-form
        :model="basicForm"
        :rules="basicRules"
        ref="basicForm"
        size="small"
        label-position="right"
        label-width="200px"
      >
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.basicTitle }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商户类型:" prop="userType">
              <el-select
                size="small"
                @change="userTypeChange"
                v-model="basicForm.userType"
                placeholder="请选择商户类型"
              >
                <el-option
                  v-for="item in userTypeOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业类型:" prop="industryCode">
              <el-select
                size="small"
                v-model="basicForm.industryCode"
                placeholder="请选择商户类型"
              >
                <el-option
                  v-for="item in industryCodeOptions"
                  :key="item.industryCode"
                  :label="item.industryName"
                  :value="item.industryCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="行业类别:" prop="mccCd">
              <el-select
                size="small"
                v-model="basicForm.mccCd"
                placeholder="请选择商户类型"
              >
                <el-option
                  v-for="item in mccCdOptions"
                  :key="item.industryCode"
                  :label="item.industryName"
                  :value="item.industryCode"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="客户经理:" prop="accountManager">
              <el-select
                size="small"
                v-model="basicForm.accountManager"
                placeholder="请选择客户经理"
              >
                <el-option
                  v-for="item in accountManagerOptions"
                  :key="item.userId"
                  :label="item.userName"
                  :value="item.userId"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.businessTitle }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24" v-if="basicForm.userType != '3'">
            <el-form-item label="营业执照照片:" prop="licensePic">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpRoaLicenseRequest"
                :limit="1"
                :file-list="roaLicenseFileList"
                :on-remove="roaLicenseRemove"
                :before-remove="beforeroaLicenseRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="营业执照全称:" prop="businessLicence">
              <el-input
                type="text"
                v-model="basicForm.businessLicence"
                placeholder="请输入营业执照全称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="商户简称:" prop="userShortName">
              <el-input
                v-model="basicForm.userShortName"
                placeholder="请输入商户简称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="basicForm.userType != '3'">
            <el-form-item label="社会信用代码:" prop="businessLicenceNo">
              <el-input
                type="text"
                v-model="basicForm.businessLicenceNo"
                placeholder="请输入社会信用代码"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="basicForm.userType != '3'">
            <el-form-item label="营业执照开始时间:" prop="businessLicenceSDate">
              <el-input
                type="text"
                v-model="basicForm.businessLicenceSDate"
                placeholder="请输入营业执照开始时间"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="basicForm.userType != '3'">
            <el-form-item label="营业执照结束时间:" prop="businessLicenceEDate">
              <el-input
                type="text"
                v-model="basicForm.businessLicenceEDate"
                placeholder="请输入营业执照结束时间"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="营业地址:" prop="contactsAddr">
              <el-input
                type="textarea"
                v-model="basicForm.contactsAddr"
                placeholder="请输入营业地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.personTitle }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="法人手持身份证:" prop="handHeld">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httphandHeldRequest"
                :limit="1"
                :file-list="handHeldList"
                :on-remove="handHeldRemove"
                :before-remove="beforehandHeldRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证人像面:" prop="cardFront">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpCardFrontRequest"
                :limit="1"
                :file-list="cardFrontList"
                :on-remove="cardFrontRemove"
                :before-remove="beforecardFrontRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="法人身份证国徽面:" prop="cardReverse">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpCardReverseRequest"
                :limit="1"
                :file-list="cardReverseList"
                :on-remove="cardReverseRemove"
                :before-remove="beforecardReverseRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人姓名:" prop="legalPersonName">
              <el-input
                v-model="basicForm.legalPersonName"
                placeholder="请输入法人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人性别:" prop="crpGender">
              <el-select
                size="small"
                v-model="basicForm.crpGender"
                placeholder="请选择法人性别"
              >
                <el-option
                  v-for="item in crpGenderOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人电话:" prop="legalPersonPhone">
              <el-input
                v-model="basicForm.legalPersonPhone"
                placeholder="请输入法人电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人职业:" prop="crpProfession">
              <el-select
                size="small"
                v-model="basicForm.crpProfession"
                filterable
                placeholder="请输入法人职业"
              >
                <el-option
                  v-for="item in crpProfessionOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人身份证号:" prop="legalPersonId">
              <el-input
                v-model="basicForm.legalPersonId"
                placeholder="请输入身份证号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人身份证开始日期:" prop="legalPersonIdSdate">
              <el-input
                v-model="basicForm.legalPersonIdSdate"
                placeholder="请输入身份证开始日期"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人身份证结束日期:" prop="legalPersonIdEdate">
              <el-input
                v-model="basicForm.legalPersonIdEdate"
                placeholder="请输入身份证结束日期"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="法人省市区:" prop="mercProvinceCityArea">
              <el-cascader
                v-if="isShow"
                v-model="basicForm.mercProvinceCityArea"
                :options="mercProvinceCityAreaOptions"
                :props="mercProvinceCityAreaProps"
                placeholder="请选择法人省市区"
                clearable
                filterable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="法人地址:" prop="crpAddr">
              <el-input
                type="textarea"
                v-model="basicForm.crpAddr"
                placeholder="请输入地址"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.linkmanTitle }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="联系人姓名:" prop="contactsName">
              <el-input
                type="text"
                v-model="basicForm.contactsName"
                placeholder="请输入联系人姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人电话:" prop="contactsPhone">
              <el-input
                type="tel"
                v-model="basicForm.contactsPhone"
                placeholder="请输入联系人电话"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="联系人邮箱:" prop="contactsEmail">
              <el-input
                type="email"
                v-model="basicForm.contactsEmail"
                placeholder="请输入联系人邮箱"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注:" prop="remark">
              <el-input
                type="textarea"
                v-model="basicForm.remark"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.typeTitle }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="结算卡类型:" prop="balanceAccType">
              <el-select
                size="small"
                v-model="basicForm.balanceAccType"
                placeholder="请选择结算卡类型"
              >
                <el-option
                  v-for="item in balanceAccTypeOptions"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.cardTitle }}</span>
        </div>
        <el-row
          :gutter="20"
          v-if="
            basicForm.balanceAccType == '11' || basicForm.balanceAccType == '3'
          "
        >
          <el-col :span="24">
            <el-form-item label="银行卡正面:" prop="accountFront">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpAccountFrontRequest"
                :limit="1"
                :file-list="accountFrontList"
                :on-remove="accountFrontRemove"
                :before-remove="beforeaccountFrontRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="银行卡反面:" prop="accountReverse">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpAccountReverseRequest"
                :limit="1"
                :file-list="accountReverseList"
                :on-remove="accountReverseRemove"
                :before-remove="beforeaccountReverseRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="basicForm.balanceAccType == '3'">
          <el-col :span="24">
            <el-form-item label="手持授权书图片:" prop="holdAttorney">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpHoldAttorneyRequest"
                :limit="1"
                :file-list="holdAttorneyList"
                :on-remove="httpHoldRemove"
                :before-remove="beforehttpHoldRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="非法人身份证正面:" prop="ecardFront">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpEcardFrontRequest"
                :limit="1"
                :file-list="ecardFrontList"
                :on-remove="ecardFrontRemove"
                :before-remove="beforeecardFrontRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="非法人身份证反面:" prop="ecardReverse">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpEcardReverseRequest"
                :limit="1"
                :file-list="ecardReverseList"
                :on-remove="ecardReverseRemove"
                :before-remove="beforeecardReverseRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20" v-if="basicForm.balanceAccType == '21'">
          <el-col :span="24">
            <el-form-item label="开户许可证:" prop="openPermit">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpOpenPermitRequest"
                :limit="1"
                :file-list="openPermitList"
                :on-remove="openPermitRemove"
                :before-remove="beforeopenPermitRemove"
                :on-exceed="handHeldExceed"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="结算账户名称:" prop="balanceAccName">
              <el-input
                type="text"
                v-model="basicForm.balanceAccName"
                placeholder="请输入结算账户名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="结算账户卡号:" prop="balanceAccCardNo">
              <el-input
                type="text"
                v-model="basicForm.balanceAccCardNo"
                placeholder="请输入结算账户卡号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行省市区:" prop="acc">
              <el-cascader
                class="haruyuki-width-100"
                v-if="isShow"
                @change="provCityAreaChange"
                v-model="basicForm.accProvinceCityArea"
                :options="provinceCityAreaOptions"
                :props="provinceCityAreaProps"
                placeholder="请选择开户行省市区"
                clearable
                filterable
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户行名称:" prop="bankType">
              <el-select
                class="haruyuki-width-100"
                size="small"
                @change="bankTypeChange"
                v-model="basicForm.bankType"
                filterable
                placeholder="请输入开户行名称"
              >
                <el-option
                  v-for="item in bankNameOptions"
                  :key="item.bankType"
                  :label="item.bankName"
                  :value="item.bankType"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开户支行名称:" prop="openAccBankType">
              <el-select
                class="haruyuki-width-100"
                size="small"
                v-model="basicForm.openAccBankType"
                filterable
                placeholder="请输入开户支行名称"
              >
                <el-option
                  v-for="item in accBankNameOptions"
                  :key="item.openAccBankType"
                  :label="item.openAccBankName"
                  :value="item.openAccBankType"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="银行预留手机号:" prop="bankMobile">
              <el-input
                type="tel"
                v-model="basicForm.bankMobile"
                placeholder="请输入银行预留手机号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.rateTitle }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="扫码费率（单位：%）:" prop="codeScanningRate">
              <el-input-number
                size="small"
                v-model="basicForm.codeScanningRate"
                :precision="4"
                :step="0.0001"
                :min="0"
                :max="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="是否开通D0结算:" prop="codeAdvanceOpen">
              <el-switch
                v-model="basicForm.codeAdvanceOpen"
                active-value="1"
                inactive-value="0"
              ></el-switch>
            </el-form-item>
          </el-col>
          <el-col :span="8" v-if="basicForm.codeAdvanceOpen == '1'">
            <el-form-item label="垫资费费率（单位：%）:" prop="codeAdvanceRate">
              <el-input-number
                size="small"
                v-model="basicForm.codeAdvanceRate"
                :precision="4"
                :step="0.0001"
                :min="0"
                :max="1"
              ></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <div class="haruyuki-title haruyuki-size-16">
          <i class="el-icon-user"></i
          ><span class="haruyuki-ml-6">{{ posTitle.shopTitle }}</span>
        </div>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="商户门头照片:" prop="merchantDoor">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpmerchantDoorRequest"
                :limit="1"
                :file-list="merchantDoorList"
                :on-remove="merchantDoorRemove"
                :before-remove="beforemerchantDoorRemove"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内景照片:" prop="interior">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpinteriorRequest"
                :limit="1"
                :file-list="interiorList"
                :on-remove="interiorRemove"
                :before-remove="beforeinteriorRemove"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="收银台照片:" prop="checkoutCounter">
              <el-upload
                action="/api/blade-resource/oss/endpoint/put-file-attach"
                list-type="picture-card"
                :http-request="httpCheckoutCounterRequest"
                :limit="1"
                :file-list="checkoutCounterList"
                :on-remove="checkoutCounterRemove"
                :before-remove="beforecheckoutCounterRemove"
                :before-upload="beforeUpload"
                :on-preview="imgPreview"
              >
                <i slot="default" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="haruyuki-flex-x-end haruyuki-mt-20 haruyuki-mb-40">
        <el-button size="medium" icon="el-icon-close" @click="goBack"
          >取消</el-button
        >
        <el-button
          type="primary"
          size="medium"
          icon="el-icon-check"
          v-preventClick
          @click="submitAuditEdit"
          >提交</el-button
        >
      </div>
    </section>
    <el-image-viewer
        style="z-index: 99999;"
        v-if="imgShow"
        :on-close="()=>{ imgShow = false }"
        :url-list="imgUrlList"
      ></el-image-viewer>
  </basic-container>
</template>

<script>
import {
  getAccountManagerList,
  getMccIndustryList,
  getMccList,
  getFirstBankList,
  getSecondBankList,
  getBalanceAccTypeList
} from "@/api/rb-merchant/posinfo/pos_info";
import { uploadPrivate } from "@/api/system/oss";
import { getDictionary, getRegion } from "@/api/system/dict";
import {
  getInfoAuditDetail,
  updateAllData,
} from "@/api/rb-merchant/posinfo/pos_info_audit_edit";
import canvasImg from '@/util/canvasImg';

export default {
  mixins: [canvasImg],
  data() {
    return {
      imgShow:false,
      imgUrlList:[],
      posTitle: {
        basicTitle: "基本信息",
        personTitle: "法人信息",
        businessTitle: "营业信息",
        linkmanTitle: "联系人信息",
        typeTitle: "结算类型",
        cardTitle: "开户信息",
        rateTitle: "费率信息",
        shopTitle: "协议信息",
      },
      basicForm: {
        id: null,
        userType: "",
        industryCode: "",
        mccCd: "",
        userShortName: "",
        handHeld: "",
        cardFront: "",
        cardReverse: "",
        legalPersonName: "",
        crpGender: "",
        legalPersonPhone: "",
        crpProfession: "",
        legalPersonId: "",
        legalPersonIdSdate: "",
        legalPersonIdEdate: "",
        mercProvinceCityArea: [],
        mercProvCode: "",
        mercCityCode: "",
        mercAreaCode: "",
        crpAddr: "",
        licensePic: "",
        businessLicence: "",
        businessLicenceNo: "",
        businessLicenceSDate: "",
        businessLicenceEDate: "",
        contactsName: "",
        contactsPhone: "",
        contactsEmail: "",
        contactsAddr: "",
        remark: "",
        balanceAccType: "",
        accountFront: "",
        accountReverse: "",
        openPermit: "",
        bankType: "",
        openAccBankType: "",
        accProvinceCityArea: "",
        openAccProvinceCode: "",
        openAccCityCode: "",
        openAccAreaCode: "",
        bankMobile: "",
        balanceAccName: "",
        balanceAccCardNo: "",
        codeScanningRate: "",
        codeAdvanceOpen: "",
        codeAdvanceRate: "",
        merchantDoor: "",
        interior: "",
        checkoutCounterList: "",
      },
      basicRules: {
        userType: [
          { required: true, message: "请输入商户类型", trigger: "blur" },
        ],
        industryCode: [
          { required: true, message: "请选择行业类型", trigger: "blur" },
        ],
        mccCd: [
          { required: true, message: "请选择行业MCC码", trigger: "blur" },
        ],
        userShortName: [
          { required: true, message: "请输入商户简称", trigger: "blur" },
        ],
        handHeld: [
          { required: true, message: "请输入法人手持身份证", trigger: "blur" },
        ],
        cardFront: [
          {
            required: true,
            message: "请输入法人身份证人像面",
            trigger: "blur",
          },
        ],
        cardReverse: [
          {
            required: true,
            message: "请输入法人身份证国徽面",
            trigger: "blur",
          },
        ],
        legalPersonName: [
          { required: true, message: "请输入法人姓名", trigger: "blur" },
        ],
        crpGender: [
          { required: true, message: "请输入法人性别", trigger: "blur" },
        ],
        legalPersonPhone: [
          { required: true, message: "请输入法人电话", trigger: "blur" },
        ],
        crpProfession: [
          { required: true, message: "请输入法人职业", trigger: "blur" },
        ],
        legalPersonId: [
          { required: true, message: "请输入身份证号", trigger: "blur" },
        ],
        legalPersonIdSdate: [
          {
            required: true,
            message: "请输入法人身份证开始日期",
            trigger: "blur",
          },
        ],
        legalPersonIdEdate: [
          {
            required: true,
            message: "请输入法人身份证结束日期",
            trigger: "blur",
          },
        ],
        mercProvinceCityArea: [
          { required: true, message: "请输入法人省市区", trigger: "blur" },
        ],
        crpAddr: [
          { required: true, message: "请输入法人地址", trigger: "blur" },
        ],
        licensePic: [
          { required: true, message: "请上传营业执照照片", trigger: "blur" },
        ],
        businessLicence: [
          { required: true, message: "请输入营业执照全称", trigger: "blur" },
        ],
        businessLicenceNo: [
          { required: true, message: "请输入社会信用代码", trigger: "blur" },
        ],
        businessLicenceSDate: [
          {
            required: true,
            message: "请选择营业执照开始时间",
            trigger: "blur",
          },
        ],
        businessLicenceEDate: [
          {
            required: true,
            message: "请选择营业执照结束时间",
            trigger: "blur",
          },
        ],
        contactsName: [
          { required: true, message: "请输入联系人姓名", trigger: "blur" },
        ],
        contactsPhone: [
          { required: true, message: "请输入联系人邮箱", trigger: "blur" },
        ],
        contactsEmail: [
          { required: true, message: "请输入联系人电话", trigger: "blur" },
        ],
        contactsAddr: [
          { required: true, message: "请输入营业地址", trigger: "blur" },
        ],
        // remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        balanceAccType: [
          { required: true, message: "请输入结算卡类型", trigger: "blur" },
        ],
        accountFront: [
          { required: true, message: "请上传银行卡正面", trigger: "blur" },
        ],
        accountReverse: [
          { required: true, message: "请上传银行卡反面", trigger: "blur" },
        ],
        holdAttorney: [
          {
            required: true,
            message: "请上传非法人手持授权书图片",
            trigger: "blur",
          },
        ],
        ecardFront: [
          {
            required: true,
            message: "请上传非法人身份证正面",
            trigger: "blur",
          },
        ],
        ecardReverse: [
          {
            required: true,
            message: "请上传非法人身份证反面",
            trigger: "blur",
          },
        ],
        openPermit: [
          { required: true, message: "请上传开户许可证", trigger: "blur" },
        ],
        bankType: [
          { required: true, message: "请输入开户行名称", trigger: "blur" },
        ],
        openAccBankType: [
          { required: true, message: "请输入开户支行名称", trigger: "blur" },
        ],
        accProvinceCityArea: [
          { required: true, message: "请选择开户行省市区", trigger: "blur" },
        ],
        bankMobile: [
          { required: true, message: "请输入银行预留手机号", trigger: "blur" },
        ],
        balanceAccName: [
          { required: true, message: "请输入结算账户名称", trigger: "blur" },
        ],
        balanceAccCardNo: [
          { required: true, message: "请输入结算账户卡号", trigger: "blur" },
        ],
        codeScanningRate: [
          { required: true, message: "请输入扫码费率", trigger: "blur" },
        ],
        merchantDoor: [
          { required: true, message: "请上传商户门头照片", trigger: "blur" },
        ],
        interior: [
          { required: true, message: "请上传内景照片", trigger: "blur" },
        ],
        checkoutCounter: [
          { required: true, message: "请上传收银台照片", trigger: "blur" },
        ],
      },
      userTypeOptions: [],
      industryCodeOptions: [],
      mccCdOptions: [],
      mercProvinceCityAreaOptions: [],
      mercProvinceCityAreaProps: {
        label: "name",
        value: "code",
        lazy: true,
        lazyLoad(node, resolve) {
          let stop_level = 2;
          let level = node.level;
          let data = node.data || {};
          let code = data.code;
          let list = [];
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 0) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 1) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 2) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else {
            callback();
          }
        },
      },
      accountManagerOptions: [], //客户经理列表
      crpGenderOptions: [],
      crpProfessionOptions: [],
      roaLicenseFileList: [],
      handHeldList: [],
      cardFrontList: [],
      cardReverseList: [],
      balanceAccTypeOptions: [],
      bankNameOptions: [],
      accBankNameOptions: [],
      provinceCityAreaOptions: [],
      provinceCityAreaProps: {
        label: "name",
        value: "code",
        lazy: true,
        lazyLoad(node, resolve) {
          let stop_level = 2;
          let level = node.level;
          let data = node.data || {};
          let code = data.code;
          let list = [];
          let callback = () => {
            resolve(
              (list || []).map((ele) => {
                return Object.assign(ele, {
                  leaf: level >= stop_level,
                });
              })
            );
          };
          if (level == 0) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 1) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else if (level == 2) {
            getRegion(code).then(
              (res) => {
                list = res.data.data;
                callback();
              },
              (error) => {
                window.console.log(error);
              }
            );
          } else {
            callback();
          }
        },
      },
      accountFrontList: [],
      accountReverseList: [],
      openPermitList: [],
      holdAttorneyList: [],
      ecardFrontList: [],
      ecardReverseList: [],
      merchantDoorList: [],
      interiorList: [],
      checkoutCounterList: [],
      isShow: true,
    };
  },
  watch: {
    "basicForm.userType"(val) {
      if (val) {
        this.getMccIndustry(val);
      }
    },
    "basicForm.industryCode"(val) {
      if (val) {
        this.getMccChildren(val);
      }
    },
  },
  computed: {
    // exhibition() {
    //   return val => {
    // 		if (val == '' || val == '-1') {
    // 			return val = 0;
    // 		} else {
    //       return val;
    //     }
    // 	};
    // }
  },
  created() {
    this.doGetDicts();
    this.infoData();
  },
  mounted() {},
  methods: {
    /* 预览图片 */
    imgPreview(file) {
      this.imgUrlList[0] = file.url;
      this.imgShow = true;
    },
    /* 驳回后 提交修改 */
    submitAuditEdit() {
      this.$refs["basicForm"].validate((valid) => {
        if (valid) {
          updateAllData(this.basicForm).then(
            (res) => {
              if (res.data.code == "200") {
                this.$message({
                  type: "success",
                  message: "修改成功!",
                });
                this.goBack();
              } else {
                this.$message({
                  type: "error",
                  message: res.data.message,
                });
              }
            },
            (error) => {
              window.console.log(error);
            }
          );
        } else {
          return false;
        }
      });
    },
    /* 页面加载 初始化请求详情接口 */
    async infoData() {
      const id = this.$route.query.id;
      await getInfoAuditDetail(id).then((res) => {
        this.isShow = false;
        this.basicForm = res.data.data;
        getBalanceAccTypeList(this.basicForm.userType).then((res) => {
          this.balanceAccTypeOptions = res.data.data;
        });
        this.$nextTick(() => {
          this.isShow = true;
          this.basicForm.mercProvinceCityArea = [
            this.basicForm.mercProvCode,
            this.basicForm.mercCityCode,
            this.basicForm.mercAreaCode,
          ];
          this.basicForm.accProvinceCityArea = [
            this.basicForm.openAccProvinceCode,
            this.basicForm.openAccCityCode,
            this.basicForm.openAccAreaCode,
          ];
          this.roaLicenseFileList.push({ url: res.data.data.licensePicUrl || "" });
          this.handHeldList.push({ url: res.data.data.handHeldUrl || "" });
          this.cardFrontList.push({ url: res.data.data.cardFrontUrl || "" });
          this.cardReverseList.push({ url: res.data.data.cardReverseUrl || "" });
          this.accountFrontList.push({ url: res.data.data.accountFrontUrl || "" });
          this.accountReverseList.push({ url: res.data.data.accountReverseUrl || "" });
          this.holdAttorneyList.push({ url: res.data.data.holdAttorneyUrl || "" });
          this.openPermitList.push({ url: res.data.data.openPermitUrl || "" });
          this.ecardFrontList.push({ url: res.data.data.ecardFrontUrl || "" });
          this.ecardReverseList.push({ url: res.data.data.ecardReverseUrl || "" });
          this.merchantDoorList.push({ url: res.data.data.merchantDoorUrl });
          this.interiorList.push({ url: res.data.data.interiorUrl });
          this.checkoutCounterList.push({ url: res.data.data.checkoutCounterUrl });
          if (this.basicForm.openAccCityCode && this.basicForm.bankType) {
            getSecondBankList(
              "-1",
              "-1",
              this.basicForm.openAccCityCode,
              this.basicForm.bankType
            ).then((res) => {
              this.accBankNameOptions = res.data.data.records;
            });
          }
        });
      });
      await getAccountManagerList({ createUser: "" }).then((res) => {
        this.accountManagerOptions = res.data.data;
      });
      await getFirstBankList("-1", "-1").then((res) => {
        this.bankNameOptions = res.data.data.records;
      });
    },
    /* 字典 */
    doGetDicts() {
      getDictionary({ code: "user_income_type" }).then((res) => {
        this.userTypeOptions = res.data.data;
      });
      getDictionary({ code: "crp_gender" }).then((res) => {
        this.crpGenderOptions = res.data.data;
      });
      getDictionary({ code: "crp_profession" }).then((res) => {
        this.crpProfessionOptions = res.data.data;
      });
    },
    /* 商户类型 change */
    userTypeChange(e) {
      getBalanceAccTypeList(e).then((res) => {
        this.balanceAccTypeOptions = res.data.data;
        this.basicForm.balanceAccType = "";
      });
    },
    /* 行业类型 interface */
    getMccIndustry(userType) {
      getMccIndustryList(userType).then(
        (res) => {
          this.industryCodeOptions = res.data.data;
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 行业类别 interface */
    getMccChildren(industryCode) {
      getMccList("-1", "-1", industryCode).then(
        (res) => {
          this.mccCdOptions = res.data.data;
        },
        (error) => {
          window.console.log(error);
        }
      );
    },
    /* 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传 */
    // beforeUpload(file) {
    //   this.compressPictures(file);
    // },
    /* 文件超出个数限制时的钩子 */
    handHeldExceed() {
      this.$message.error("只能上传一张图片哦~");
    },
    /* 营业执照照片上传 */
    httpRoaLicenseRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.licensePic = res.data.data.name;
        this.$refs.basicForm.validateField("licensePic");
      });
    },
    /* 营业执照照片删除 */
    roaLicenseRemove(file, fileList) {
      this.roaLicenseFileList = fileList;
      this.basicForm.licensePic = "";
    },
    beforeroaLicenseRemove() {
      return this.$confirm(`确定移除营业执照照片？`);
    },
    /* 法人手持身份证上传 */
    httphandHeldRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.handHeld = res.data.data.name;
        this.$refs.basicForm.validateField("handHeld");
      });
    },
    /* 法人手持身份证删除 */
    handHeldRemove(file, fileList) {
      this.handHeldList = fileList;
      this.basicForm.handHeld = "";
    },
    beforehandHeldRemove() {
      return this.$confirm(`确定移除法人手持身份证照片？`);
    },
    /* 法人身份证人像面上传 */
    httpCardFrontRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.cardFront = res.data.data.name;
        this.$refs.basicForm.validateField("cardFront");
      });
    },
    /* 法人身份证人像面删除 */
    cardFrontRemove(file, fileList) {
      this.cardFrontList = fileList;
      this.basicForm.cardFront = "";
    },
    beforecardFrontRemove() {
      return this.$confirm(`确定移除法人身份证人像面照片？`);
    },
    /* 法人身份证国徽面上传 */
    httpCardReverseRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.cardReverse = res.data.data.name;
        this.$refs.basicForm.validateField("cardReverse");
      });
    },
    /* 法人身份证国徽面删除 */
    cardReverseRemove(file, fileList) {
      this.cardReverseList = fileList;
      this.basicForm.cardReverse = "";
    },
    beforecardReverseRemove() {
      return this.$confirm(`确定移除法人身份证国徽面照片？`);
    },
    /* 开户行 change */
    bankTypeChange(val) {
      this.accBankNameOptions = [];
      if (val && this.basicForm.accProvinceCityArea) {
        this.basicForm.openAccBankType = "";
        getSecondBankList(
          "-1",
          "-1",
          this.basicForm.accProvinceCityArea[1],
          val
        ).then((res) => {
          this.accBankNameOptions = res.data.data.records;
        });
      }
    },
    /* 开户行 change */
    provCityAreaChange(val) {
      this.accBankNameOptions = [];
      if (val && this.basicForm.bankType) {
        this.basicForm.openAccBankType = "";
        getSecondBankList("-1", "-1", val[1], this.basicForm.bankType).then(
          (res) => {
            this.accBankNameOptions = res.data.data.records;
          }
        );
      }
    },
    /* 银行卡正面上传 */
    httpAccountFrontRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.accountFront = res.data.data.name;
        this.$refs.basicForm.validateField("accountFront");
      });
    },
    /* 银行卡正面删除 */
    accountFrontRemove(file, fileList) {
      this.accountFrontList = fileList;
      this.basicForm.accountFront = "";
    },
    beforeaccountFrontRemove() {
      return this.$confirm(`确定移除银行卡正面照片？`);
    },
    /* 银行卡反面上传 */
    httpAccountReverseRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.accountReverse = res.data.data.name;
        this.$refs.basicForm.validateField("accountReverse");
      });
    },
    /* 银行卡反面删除 */
    accountReverseRemove(file, fileList) {
      this.accountReverseList = fileList;
      this.basicForm.accountReverse = "";
    },
    beforeaccountReverseRemove() {
      return this.$confirm(`确定移除银行卡反面照片？`);
    },
    /* 开户许可证上传 */
    httpOpenPermitRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.openPermit = res.data.data.name;
        this.$refs.basicForm.validateField("openPermit");
      });
    },
    /* 开户许可证删除 */
    openPermitRemove(file, fileList) {
      this.openPermitList = fileList;
      this.basicForm.openPermit = "";
    },
    beforeopenPermitRemove() {
      return this.$confirm(`确定移除开户许可证照片？`);
    },
    /* 非法人手持授权书图片上传 */
    httpHoldAttorneyRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.cardForm.holdAttorney = res.data.data.name;
        this.$refs.cardForm.validateField("holdAttorney");
      });
    },
    /* 非法人手持授权书图片删除 */
    httpHoldRemove(file, fileList) {
      this.holdAttorneyList = fileList;
      this.cardForm.holdAttorney = "";
    },
    beforehttpHoldRemove() {
      return this.$confirm(`确定移除手持授权书图片？`);
    },
    /* 非法人身份证正面上传 */
    httpEcardFrontRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.ecardFront = res.data.data.name;
        this.$refs.basicForm.validateField("ecardFront");
      });
    },
    /* 非法人身份证正面删除 */
    ecardFrontRemove(file, fileList) {
      this.ecardFrontList = fileList;
      this.basicForm.ecardFront = "";
    },
    beforeecardFrontRemove() {
      return this.$confirm(`确定移除非法人身份证正面照片？`);
    },
    
    /* 非法人身份证反面上传 */
    httpEcardReverseRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.ecardReverse = res.data.data.name;
        this.$refs.basicForm.validateField("ecardReverse");
      });
    },
    /* 非法人身份证反面删除 */
    ecardReverseRemove(file, fileList) {
      this.ecardReverseList = fileList;
      this.basicForm.ecardReverse = "";
    },
    beforeecardReverseRemove() {
      return this.$confirm(`确定移除非法人身份证反面照片？`);
    },
    /* 银行卡正面上传 */
    httpmerchantDoorRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.merchantDoor = res.data.data.name;
        this.$refs.basicForm.validateField("merchantDoor");
      });
    },
    /* 银行卡正面删除 */
    merchantDoorRemove(file, fileList) {
      this.merchantDoorList = fileList;
      this.basicForm.merchantDoor = "";
    },
    beforemerchantDoorRemove() {
      return this.$confirm(`确定移除商户门头照片？`);
    },
    /* 内景照片上传 */
    httpinteriorRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.interior = res.data.data.name;
        this.$refs.basicForm.validateField("interior");
      });
    },
    /* 内景照片删除 */
    interiorRemove(file, fileList) {
      this.interiorList = fileList;
      this.basicForm.interior = "";
    },
    beforeinteriorRemove() {
      return this.$confirm(`确定移除内景照片？`);
    },
    /* 收银台照片上传 */
    httpCheckoutCounterRequest(option) {
      uploadPrivate(option.file, option.file.name).then((res) => {
        this.basicForm.checkoutCounter = res.data.data.name;
        this.$refs.basicForm.validateField("checkoutCounter");
      });
    },
    /* 收银台照片删除 */
    checkoutCounterRemove(file, fileList) {
      this.checkoutCounterList = fileList;
      this.basicForm.checkoutCounter = "";
    },
    beforecheckoutCounterRemove() {
      return this.$confirm(`确定移除收银台照片？`);
    },
    /* 返回页面 */
    goBack() {
      this.$router.$avueRouter.closeTag();
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
</style>